<template>
	<div class="my-favorites-container">
		<!-- 搜索框 -->
		<div class="search-section">
			<van-search v-model="searchKeyword" :show-action="false" placeholder="搜索收藏商品" @search="filterFavorites"
				@input="filterFavorites" />
		</div>

		<!-- 收藏列表区域 -->
		<div v-if="filteredFavorites.length > 0">
			<van-cell v-for="(favorite, index) in filteredFavorites" :key="favorite.id" clickable
				@click="goToDetail(favorite.id)">
				<template #title>
					<div class="favorite-item">
						<!-- 图片区域 -->
						<div class="item-image">
							<van-image :src="favorite.pic || defaultImage" :error-src="errorImage" fit="cover" />
						</div>

						<!-- 标题和价格区域 -->
						<div class="item-info">
							<div class="item-title">{{ favorite.title }}</div>
							<div class="item-price">
								<span class="price-value">￥{{ formatPrice(favorite.price) }}</span>
							</div>
						</div>

						<!-- 删除图标 -->
						<van-icon name="delete-o" size="18" color="#ff5252" @click.stop="deleteFavorite(favorite.id)" />
					</div>
				</template>
			</van-cell>
		</div>
		<div v-else>
			<p class="empty-tip" v-if="searchKeyword === ''">你还没有收藏任何内容哦~</p>
			<p class="empty-tip" v-else>没有找到与 "{{ searchKeyword }}" 相关的收藏内容</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				favorites: [],
				searchKeyword: '',
				filteredFavorites: [],
				defaultImage: 'https://picsum.photos/200/200?text=默认图片',
				errorImage: 'https://picsum.photos/200/200?text=图片加载失败'
			};
		},
		created() {
			this.loadFavorites();
		},
		watch: {
			// 监听收藏列表变化，更新本地存储
			favorites: {
				deep: true,
				handler() {
					this.saveFavorites();
				}
			},
			// 监听搜索关键词变化，实时过滤
			searchKeyword(newVal) {
				this.filterFavorites();
			}
		},
		methods: {
			loadFavorites() {
				try {
					const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
					this.favorites = favorites;
					this.filteredFavorites = [...favorites]; // 初始化过滤列表
				} catch (error) {
					console.error('加载收藏数据失败:', error);
					this.favorites = [];
					this.filteredFavorites = [];
				}
			},
			saveFavorites() {
				try {
					localStorage.setItem('favorites', JSON.stringify(this.favorites));
				} catch (error) {
					console.error('保存收藏数据失败:', error);
				}
			},
			filterFavorites() {
				if (!this.searchKeyword.trim()) {
					// 搜索关键词为空时显示全部
					this.filteredFavorites = [...this.favorites];
					return;
				}

				const keyword = this.searchKeyword.trim().toLowerCase();
				this.filteredFavorites = this.favorites.filter(item => {
					return item.title.toLowerCase().includes(keyword) ||
						(item.price && item.price.toString().includes(keyword));
				});
			},
			goToDetail(id) {
				// 跳转到商品详情页
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					}
				});
			},
			deleteFavorite(id) {
				this.favorites = this.favorites.filter(item => item.id !== id);
				// 同步更新过滤后的列表
				this.filteredFavorites = this.filteredFavorites.filter(item => item.id !== id);
			},
			formatPrice(price) {
				return (price || 0).toFixed(2);
			}
		}
	};
</script>

<style scoped>
	.my-favorites-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		background-color: #f9f9f9;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.search-section {
		margin-bottom: 20px;
	}

	.empty-tip {
		text-align: center;
		color: #7f8c8d;
		margin-top: 25px;
		font-style: italic;
	}

	.van-cell {
		position: relative;
		padding-right: 40px;
		transition: background-color 0.3s ease;
	}

	.van-cell:hover {
		background-color: #ecf0f1;
	}

	.van-icon {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.van-icon:hover {
		color: #c0392b;
	}

	.favorite-item {
		display: flex;
		align-items: center;
	}

	.item-image {
		width: 60px;
		height: 60px;
		margin-right: 10px;
		border-radius: 5px;
		overflow: hidden;
	}

	.item-info {
		flex: 1;
	}

	.item-title {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
	}

	.item-price {
		font-size: 16px;
		color: #e53935;
		font-weight: bold;
	}
</style>